<div layout="row" layout-sm="column" layout-xs="column">

    <div flex-gt-sm="33">
        <div ng-controller="KafkaConnectListCtrl" ng-include="'src/kafka-connect/list/list-connectors.html'"></div>
    </div>
    <div flex-gt-sm="66">
        <md-card class="new">

            <md-toolbar ng-show="!displayingControlTopics" class="md-hue-2">
                <div class="md-toolbar-tools">
                    <h4>
                        <span>Create New Connector </span> <!--({{connector.type}}): {{connector.name}}</span>-->
                    </h4>
                    <span flex></span>
                </div>
            </md-toolbar>

            <!--Info box-->
            <div class="connector-sum">
                <div layout="row"  layout-align="start center" layout-padding>
                    <div>
                        <img img ng-src="src/assets/icons/{{connector.icon}}" style="height:30px;"/>
                    </div>
                    <div>
                        <h3 ng-show="connector.type!='Sink'" style="font-size:12px;padding:0px; margin:0px">{{simpleName(connector.name)}} <i class="fa fa-long-arrow-right" aria-hidden="true"></i> Kafka</h3>
                        <h3 ng-show="connector.type=='Sink'" style="font-size:12px;padding:0px; margin:0px"> Kafka <i class="fa fa-long-arrow-right" aria-hidden="true"></i> {{simpleName(connector.name)}} </h3>
                        <p style="font-size:12px;padding:0px; margin:0px">{{connector.description}}</p>
                        <p style="font-size:12px;padding:0px; margin:5px 0 0 0;" class="grey">
                            <span ng-bind="::connector.class"></span>
                            <span ng-if="::docs">
                                | <a ng-href="{{:: docs }}" target="_blank">docs</a>
                            </span>
                        </p>
                    </div>
                    <span flex></span>
                </div>
            </div>

            <md-card-content style="padding-top: 0">
              <form name="form">
                <configuration-editor
                  ng-model="model"
                  ng-model-options="{ debounce: 500 }">
                </configuration-editor>
                <md-toolbar class="md-hue-2" style="background-color: transparent;color:#333;height: 20px;">
                  <div class="md-toolbar-tools">
                    <md-switch
                      aria-label="Show required fields"
                      ng-change="getAllConfig(connector.class)"
                      ng-model="showAllConfig"
                      style="font-size:16px;">
                      Show required fields
                    </md-switch>
                    <span flex></span>
                    <md-button ng-hide="connector.isUndefined || toggleEditor " ng-disabled="forms.cForm.$invalid" ng-click="previousTab()">
                      <i class="fa fa-angle-double-left" aria-hidden="true"></i> Back
                    </md-button>
                    <md-button
                      ng-disabled="errorConfigs.length != 0 || form.$invalid"
                      ng-click="validateAndCreateConnector()">
                      Create
                    </md-button>
                  </div>
                </md-toolbar>
              </form>

              <!--Validation OK-->
              <div class="green">{{validConfig}}</div>

              <div class="green" ng-show="noextraconfig">There is no extra config</div>

              <!--Validation not OK-->
              <div class="red" ng-messages="form.$error">
                <div ng-message="parse">Invalid syntax</div>
              </div>
                <div class="red" ng-repeat="errorConfig in errorConfigs">
                    <div ng-repeat="error in errorConfig.errors track by $index">
                     {{errorConfig.name ? '"' + errorConfig.name + '" : ' : ''}} {{error}}
                    </div>
                </div>
              <div ng-repeat="warningConfig in warningConfigs">
                  <div ng-repeat="warning in warningConfig.warnings" style="color: orange">
                      {{warning}}<br>
                  </div>
              </div>
            </md-card-content>
        </md-card>
    </div>
</div>



